import React, { ReactElement, useContext } from 'react';
import { View, Text, Image, ScrollView } from 'react-native';
import { map, reduce } from 'ramda';

import styles from './style';
import Button from '../../../../components/Button';
import { radioSelected, yutouCoinPay } from '../../../../constant/resource';
import { pay, setPayMethod } from '../../actions';
import { PayMethod, isIOS } from '../../../../constant';
import { Store } from '../../reducer';
import { moneySymbol } from '../../../../util/adaptIOS';
import navigator from '../../../../util/navigator';
import { getUserInfo } from '../../../../store/user';
import { toolTipOpen } from '../../../../util/global';
import { pointToYuan } from '../../../../util/transformMoney';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { yutouCoinNum, spuList } = state;
  const totalPrice = reduce(
    (a: number, b: number): number => a + b,
    0,
    map((item): number => item.realPrice, spuList)
  );

  return (
    <View style={styles.container}>
      <ScrollView style={styles.content} contentContainerStyle={styles.scroll}>
        {spuList.map(
          (item, index): ReactElement => {
            const { commodityName, realPrice } = item;
            const isFirst = index === 0;
            return (
              <View style={[styles.sku, isFirst ? styles.first : {}]}>
                <View>
                  <Text style={styles.skuName}>{commodityName}</Text>
                  <Text style={styles.number}>x1</Text>
                </View>
                <Text style={styles.skuPrice}>
                  {moneySymbol()}
                  {pointToYuan(realPrice)}
                </Text>
              </View>
            );
          }
        )}
        <View style={styles.total}>
          <Text style={styles.totalNum}>共{spuList.length}件</Text>
          <Text style={styles.totalPrice}>
            合计{' '}
            <Text style={styles.specialPrice}>
              {moneySymbol()}
              {pointToYuan(totalPrice)}
            </Text>
          </Text>
        </View>

        <View style={styles.payMethod}>
          <Text style={styles.payMethodDesc}>选择支付方式</Text>
        </View>
        {isIOS && (
          <Button
            style={styles.payMethodContent}
            onPress={(): void => {
              setPayMethod(PayMethod.YuTouCoin);
            }}
          >
            <Image
              style={styles.payMethodIcon}
              source={yutouCoinPay}
              resizeMode="contain"
            />
            <Text style={styles.methodDesc}>蜜蜂币支付</Text>
            <View style={styles.selectedContent}>
              <Text style={styles.coinDesc}>
                余额:{yutouCoinNum}
                {yutouCoinNum < pointToYuan(totalPrice) ? '  余额不足' : ''}
              </Text>
              <Image style={styles.selectedStatusCoin} source={radioSelected} />
            </View>
          </Button>
        )}
      </ScrollView>
      <View style={styles.priceInfo}>
        <View style={styles.priceContent}>
          <Text style={styles.price}>
            <Text style={styles.priceDesc}>合计: </Text>
            <Text style={styles.symbol}>{moneySymbol()}</Text>
            {pointToYuan(totalPrice)}
          </Text>
        </View>
        <Button
          style={styles.pay}
          onPress={(): void => {
            if (!isIOS) {
              toolTipOpen({ desc: 'Android暂不支持购买课程' });
              return;
            }

            const { isGuest } = getUserInfo();
            if (isGuest) {
              navigator.push('Login', { isBind: true });
              return;
            }

            if (yutouCoinNum < pointToYuan(totalPrice)) {
              navigator.push('Charge');
              return;
            }

            pay(totalPrice);
          }}
        >
          <Text style={styles.payDesc}>
            {yutouCoinNum < pointToYuan(totalPrice) ? '去充值' : '立即支付'}
          </Text>
        </Button>
      </View>
    </View>
  );
};
